<template>
  <view class="container">
    <NavBar
      title="活动列表"
      @clickRightFn="clickRightFn"
      iconClass="icon-caogaoxiang"
    />
    <view class="top">
      <view class="type">
        <view class=""> 类型： </view>
        <uni-data-select
          v-model="params.activityType"
          :localdata="range"
          :clear="false"
          @change="changeType"
        >
        </uni-data-select>
      </view>
      <view class="status">
        <view class=""> 状态: </view>
        <uni-data-select
          :clear="false"
          v-model="params.activityStatus"
          :localdata="statusArr"
          @change="changeStatus"
        >
        </uni-data-select>
      </view>
    </view>

    <view class="container-item">
      <view
        style="
          height: 18rpx;
          background: #f9f9f9;
          width: 100%;
          margin: 10rpx 0pt;
        "
      ></view>
      <view class="bottom" v-if="total">
        <view class="" v-for="(item, index) in activelistArr" :key="index">
          <PlayContain :itemObj="item" @click="clickItemObj(item)" />
        </view>
      </view>
      <NoData v-else />
    </view>
  </view>
</template>

<script>
import PlayContain from "../../pages/common/play-contain.vue";
import NavBar from "@/components/NavBar.vue";
import NoData from "@/components/NoData";
import { apiActivityList } from "../../net/dagnqunhuodong.js";
export default {
  components: {
    PlayContain,
    NavBar,
    NoData,
  },
  data() {
    return {
      total: 0,
      statusArr: [
        {
          value: 100,
          text: "全部",
        },
        {
          value: 1,
          text: "未开始",
        },
        {
          value: 2,
          text: "进行中",
        },
        {
          value: 3,
          text: "已结束",
        },
      ],
      activelistArr: [],
      params: {
        pageNum: 1,
        pageSize: 10,
        activityStatus: null, //状态
        activityType: null, //类型
      },
      isFlag: true,
      // 上传接口参数
      // 活动类型
      range: [],
    };
  },
  onShow(data) {
    // 判断url中是否有参数
    // if (JSON.stringify(data) != "{}") {
    // 	let dataObj = JSON.parse(data.params);
    // }
    this.range = JSON.parse(uni.getStorageSync("typeClassArr")).map((v) => {
      return {
        value: v.enumId,
        text: v.name,
      };
    });

    this.range.unshift({
      value: 100,
      text: "全部",
    });

    this.activelistArr = [];
    this.params = {
      pageNum: 1,
      pageSize: 10,
      activityStatus: null, //状态
      activityType: null, //类型
    };
    this.getActivityList();
  },
  watch: {},
  methods: {
    clickItemObj(item) {
      let params = {
        ...item,
        flag: false,
        navTitle: "活动详情",
      };
      console.log(params);
      uni.setStorage({
        key: "itemParams",
        data: JSON.stringify(params),
      });

      uni.navigateTo({
        url: `../DJinitiateActivitiesInfos/index`,
      });
    },

    // 选择状态
    changeStatus(e) {
			if(e) {
				if(this.params.activityType == 100) {
					this.params.activityType = null;
				}
				this.activelistArr = []; 
				this.params.activityStatus = e == 100 ? null : e;
				this.getActivityList();
			}
    },

    // 选择类型
    changeType(e) {
			if(e) {
				if(this.params.activityStatus == 100) {
					this.params.activityStatus = null;
				}
				this.activelistArr = [];
				this.params.activityType = e == 100 ? null : e;
				this.getActivityList();
			}
    },

    clickRightFn() {
      uni.navigateTo({
        url: "../../pages/DJinitiateActivitiesDrafts/index",
      });
    },

    // 获取活动列表
    getActivityList() {
      apiActivityList(this.params)
        .then((res) => {
          this.total = res.total;
          this.activelistArr = this.activelistArr.concat(res.data);
          uni.stopPullDownRefresh();
        })
        .catch((err) => {
          console.log(err);
          this.activelistArr = [];
          uni.stopPullDownRefresh();
        });
    },
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.activelistArr = [];
    this.params = {
      pageNum: 1,
      pageSize: 10,
      activityStatus: null, //状态
      activityType: null, //类型
    };
    this.getActivityList();
  },
  // 上拉加载
  // 触底的事件
  onReachBottom() {
    if (this.params.pageNum * this.params.pageSize > this.total) {
      uni.showToast({
        title: "数据全部加载",
        duration: 2000,
      });
    } else {
      this.params.pageNum++;
      this.getActivityList();
    }
  },
};
</script>

<style>
page {
  background: #fff;
}

.container {
  height: 100%;
  font-size: 24rpx;
}

.container-item {
  height: 100%;
  margin: 0 auto;
  margin-top: 30rpx;
}

.top {
  position: fixed;
  top: 120rpx;
  z-index: 100;
  height: 80rpx;
  width: 700rpx;
  background: #fff;
  padding: 0 35rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.type,
.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container-item .bottom {
  padding: 0 35rpx;
}

.btns {
  padding: 0 35rpx;
  width: 700rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.btns button {
  width: 300rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 10rpx;
  text-align: center;
  color: #fff;
  font-size: 26rpx;
}

.save-draft {
  background: #f2bc7f;
}

.publish {
  background: #4b58f1;
}

::v-deep .uni-select {
  width: 200rpx !important;
  height: 36rpx !important;
  background: #e7f2ff !important;
  border-radius: 8rpx !important;
}

::v-deep .uni-select__input-text {
  font-size: 24rpx !important;
  color: #3b95ff !important;
}
</style>
